<template>
  <div class="CustomerList">
    <!-- header -->
    <new-header title="家庭作业" />
    <div class="center">
      <!-- 班级选择 -->
      <div class="class-body">
        <span class="name">班级选择:</span>
        <div class="right">
          <span
            v-for="item of 5"
            :key="item"
            :class="{'active':active_class === item}"
            class="right-btn"
            @click="change_class(item)"
          >初二{{ item }}班</span>
        </div>
      </div>
      <!-- z作业 -->
      <div class="work-body">
        <div class="class-body">
          <span class="name">作业日期:</span>
          <div class="right">
            <el-date-picker
              v-model="value1"
              size="medium"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
        </div>
        <div class="class-body">
          <span class="name">有效运动时间:</span>
          <div class="right">
            <el-input-number v-model="homeworkTimeGoal" size="medium" controls-position="right" :min="1" @change="handleChange" />
          </div>
          <span class="name">分钟</span>
        </div>
      </div>
      <!-- 作业内容 -->
      <div class="neirong">
        <div class="nr-top">
          <span>作业内容：</span>
          <!-- <el-button type="success" size="medium" @click="go_to_select">选择内容</el-button> -->
        </div>
        <el-input
          v-model="content"
          class="textarea"
          type="textarea"
          placeholder="请输入内容"
          maxlength="300"
          resize="none"
          show-word-limit
        />
      </div>
      <!-- list -->
      <div class="list">
        <div
          v-for="item of 2"
          :key="item"
          class="list-item"
        >
          <span class="name">家庭作业XXX</span>
          <span class="del">删除</span>
        </div>
      </div>

      <el-button type="success" size="mini" @click="submit">提交</el-button>
      <el-button size="mini">取消</el-button>
    </div>

  </div>
  </div>
</template>

<script>
import HomeWork from '@/api/homeWork.js'
import NewHeader from '@/components/NewHeader.vue'
export default {
  name: 'WorkAdd',
  components: {
    NewHeader
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value1: '',
      active_class: 1,
      classIds: '',
      beginTime: '',
      endTime: '',
      content: '',
      homeworkTimeGoal: 30
    }
  },
  mounted() {
  },
  methods: {
    submit() {
      this.beginTime = this.gettime(this.value1[0])
      this.endTime = this.gettime(this.value1[1])
      this.add_home_work()
    },
    gettime(data) {
      const value = data.getFullYear() + '-' +
        this.checkTime(data.getMonth() + 1) + '-' +
        this.checkTime(data.getDate()) + ' ' +
        this.checkTime(data.getHours()) + ':' +
        this.checkTime(data.getMinutes()) + ':' +
        this.checkTime(data.getSeconds())
      return value
    },
    /**
    * 时间处理
    * 如果时间小于10 ，则再前面加一个'0'
    * */
    checkTime(i) {
      if (i < 10) {
        i = '0' + i
      }
      return i
    },

    change_class(index) {
      this.active_class = index
    },
    handleChange(item) {
      console.log(item)
    },
    go_to_select() {
      this.$router.push('/work/work-select')
    },
    async add_home_work() {
      const data = {
        classIds: this.classIds,
        beginTime: this.beginTime,
        endTime: this.endTime,
        content: this.content,
        homeworkTimeGoal: this.homeworkTimeGoal
      }
      console.log(data)
      // const result = await HomeWork.HomeWorkSave(data) // 模拟请求
      // if (result.code === window.g.SUCCESS_STATE) {

      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.list{
  margin-top: 20px;
  .list-item{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    padding:0 15px;
    background: rgba(232, 232, 232, 0.1);
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
    height: 54px;
    line-height: 54px;
    font-size: 14px;
    .name{
      color: rgba(0, 0, 0, 0.65);
    }
    .del{
      color: rgba(65, 203, 137, 1);
    }
  }
}
.neirong{
  .nr-top{
    display: flex;
    justify-content: space-between;
    span{
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 36px;
    }
  }
  .textarea{
    height: 190px;
    margin-top: 16px;
    ::v-deep textarea{
      height: 100%;
    }
  }
}
.class-body{
  display: flex;
  margin-bottom: 25px;
  margin-right: 20px;
  .name{
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 36px;
    padding-right: 20px;
  }
  .right{
    display: flex;
    .right-btn{
      user-select: none;
      cursor: pointer;
      margin-right: 10px;
      height: 36px;
      line-height: 36px;
      border: 1px solid #D9D9D9;
      padding: 0 20px;
      border-radius: 4px;
      color: rgba(0, 0, 0, 0.85);
      &.active{
        color: rgba(65, 203, 137, 1);
        border: 1px solid rgba(65, 203, 137, 1);
      }
    }
  }
}
@media screen and (max-width:1200px) {
  .work-body{
    flex-wrap: wrap;
  }
}

.work-body{
  display: flex;
}
.top-header{
  background-color: white;
  overflow: hidden;
  position: absolute;
  top: -70px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  left: 0;
  .left{
    float: left;
    display: flex;
    align-items: center;
    img{
      width: 15px;
    }
    span{
      margin-left: 10px;
      width: 80px;
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .right{
    float: right;
    display: flex;
    align-items: center;
    .right-item{
      margin-right: 20px;
      width: 120px;
    }
    .last{
      color: #1890FF;
      font-size: 14px;
    }
  }

}
.CustomerList{
  position: relative;
  padding: 25px;

  .center{
    padding: 25px;
    background-color: white;
  }
}
</style>
